.pagenum {
    height: 30px;
    line-height: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .pagenum-btns {
    font-size: 0;
  }
  
  .pagenum-prev, .pagenum-num, .pagenum-active, .pagenum-next, .pagenum-break {
    display: inline-block;
    width: 30px;
    text-align: center;
    font-size: 14px;
    color: #aaaaaa;
    /* border: 1px solid #ced4da; */
    border-left: none;
    border-radius: 50%;
  }
  
    .pagenum-prev:hover, .pagenum-num:hover, .pagenum-active:hover, .pagenum-next:hover {
      text-decoration: none;
      cursor: pointer;
      color: #16dcb8;
      background-color: #e9ecef;
    }
  
  .pagenum-prev {
    border-left: 1px solid #ced4da;
  }
  
  .pagenum-active, .pagenum-active:hover {
    color: #fff;
    background-color: #16dcb8;
  }
  
  .pagenum-break {
    color: #ced4da;
  }
  
  .pagenum-skip {
    margin-left: 5px;
  }
  
  .pagenum-input {
    width: 30px;
    text-align: center;
    border: 1px solid #ced4da;
    padding: 0;
    margin: 0 3px;
  }
  
    .pagenum-input:focus {
      outline: 2px solid #16dcb8;
    }
  
  .pagenum-ok {
    display: inline-block;
    width: 3em;
    text-align: center;
    margin-left: 5px;
    color: white;
    border: 1px solid #ced4da;
   background-color: #16dcb8;
   border-radius: 3px;
  }
  
    .pagenum-ok:hover {
      text-decoration: none;
      color: #cccccc;
      cursor: pointer;
    }
  
  .pagenum.sm {
    font-size: 12px;
  }
  
    .pagenum.sm .pagenum-prev, .pagenum.sm .pagenum-num, .pagenum.sm .pagenum-active, .pagenum.sm .pagenum-next, .pagenum.sm .pagenum-break {
      font-size: 12px;
    }
  
  .pagenum.lg {
    font-size: 16px;
  }
  
    .pagenum.lg .pagenum-prev, .pagenum.lg .pagenum-num, .pagenum.lg .pagenum-active, .pagenum.lg .pagenum-next, .pagenum.lg .pagenum-break {
      font-size: 16px;
    }
  
  .pagenum.xl {
    font-size: 20px;
  }
  
    .pagenum.xl .pagenum-prev, .pagenum.xl .pagenum-num, .pagenum.xl .pagenum-active, .pagenum.xl .pagenum-next, .pagenum.xl .pagenum-break {
      font-size: 20px;
    }
  
  .pagenum.gray .pagenum-prev, .pagenum.gray .pagenum-num, .pagenum.gray .pagenum-active, .pagenum.gray .pagenum-next, .pagenum.gray .pagenum-break, .pagenum.gray .pagenum-prev:hover, .pagenum.gray .pagenum-num:hover, .pagenum.gray .pagenum-active:hover, .pagenum.gray .pagenum-next:hover, .pagenum.gray .pagenum-ok, .pagenum.gray .pagenum-ok:hover {
    color: #6c757d;
  }
  
    .pagenum.gray .pagenum-active, .pagenum.gray .pagenum-active:hover {
      color: #fff;
      background-color: #6c757d;
    }
  
  .pagenum.green .pagenum-prev, .pagenum.green .pagenum-num, .pagenum.green .pagenum-active, .pagenum.green .pagenum-next, .pagenum.green .pagenum-break, .pagenum.green .pagenum-prev:hover, .pagenum.green .pagenum-num:hover, .pagenum.green .pagenum-active:hover, .pagenum.green .pagenum-next:hover, .pagenum.green .pagenum-ok, .pagenum.green .pagenum-ok:hover {
    color: #28a745;
  }
  
    .pagenum.green .pagenum-active, .pagenum.green .pagenum-active:hover {
      color: #fff;
      background-color: #28a745;
    }
  
  .pagenum.red .pagenum-prev, .pagenum.red .pagenum-num, .pagenum.red .pagenum-active, .pagenum.red .pagenum-next, .pagenum.red .pagenum-break, .pagenum.red .pagenum-prev:hover, .pagenum.red .pagenum-num:hover, .pagenum.red .pagenum-active:hover, .pagenum.red .pagenum-next:hover, .pagenum.red .pagenum-ok, .pagenum.red .pagenum-ok:hover {
    color: #dc3545;
  }
  
    .pagenum.red .pagenum-active, .pagenum.red .pagenum-active:hover {
      color: #fff;
      background-color: #dc3545;
    }
  
  .pagenum.yellow .pagenum-prev, .pagenum.yellow .pagenum-num, .pagenum.yellow .pagenum-active, .pagenum.yellow .pagenum-next, .pagenum.yellow .pagenum-break, .pagenum.yellow .pagenum-prev:hover, .pagenum.yellow .pagenum-num:hover, .pagenum.yellow .pagenum-active:hover, .pagenum.yellow .pagenum-next:hover, .pagenum.yellow .pagenum-ok, .pagenum.yellow .pagenum-ok:hover {
    color: #ffc107;
  }
  
    .pagenum.yellow .pagenum-active, .pagenum.yellow .pagenum-active:hover {
      color: #fff;
      background-color: #ffc107;
    }
  
  .pagenum.center {
    text-align: center;
  }
  
  .pagenum.right {
    text-align: right;
  }
  .pagenum-prev,.pagenum-next{
      border:1px solid #16dcb8;
      font-size: 20px;
  }
  .pagenum-prev{
    margin-left: 6%;
  }
